<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传账户</title>
    <script type="text/javascript" type='module' charset="UTF-8" src="/js/collection.js"></script>
</head>
<body>
    <div id="app" class="bank">
      <vxe-grid v-bind="gridOptions" >
        <template #toolbar_tools>
          <el-button @click="handleSearch">查询</el-button>
        </template>
        <template #toolbar_buttons>
          <el-input placeholder="请输入单位编码或者单位名称"  style="width: 250px" clearable>
        </template>
        <template #operation="{ row }">
          <div class="operation-box">
            <el-button type="primary"
              link
              @click.stop="handleOperation('look', row)">查看流水表
            </el-button>
          </div>
        </template>
      </vxe-grid>
    </div>
</body>
<script type="module">
  const { createApp, ref, reactive } = Vue
  createApp({
    setup() {
    const defaultParams = reactive({
        keyWords: undefined
        })
      const gridOptions = reactive({
        border: true,
        align: null,
        height: 'auto',
        columnConfig: {
          resizable: true
        },
      toolbarConfig: {
          slots: {
            buttons: 'toolbar_buttons',
            tools: 'toolbar_tools'
          }
        },
        rowConfig: {
         // 当鼠标移到行时，是否要高亮当前行
         isHover: true,
          // 当鼠标点击行时，是否要高亮当前行
		      isCurrent: true
      },
          // 通用分页配置
	    pagerConfig: {
	  	layouts: ['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
		  border: true,
		  pageSize: 20,
		  pageSizes: [20, 50, 100, 200],
		  background: true,
	} ,
        columns: [
          { type: 'seq', width: 50,   align: "center",fixed: "left",},
          { field: 'name', title: '银行账户', align: "center",width: 150 },
          { field: 'sex', title: '银行机构名称' , align: "center",width: 150 },
          { field: 'address', title: '账户类型', align: "center",width: 150  },
          { field: 'name', title: '开户行编码', align: "center",width: 150  },
          { field: 'sex', title: '开户行名称', align: "center",width: 150  },
          { field: 'address', title: '区划', align: "center",width: 150  },
          { field: 'address', title: '总行编码', align: "center",width: 150  },
          { field: 'address', title: '账户状态', align: "center",width: 150 },
          { field: 'address', title: '账户余额', align: "center",width: 150  },
          { field: 'address', title: '可用余额' , align: "center",width: 150 },
          { field: 'address', title: '开户时间' , align: "center",width: 150 },
          { field: 'address', title: '归属单位' , align: "center",width: 150 },
          { field: 'address', title: '上报时间' , align: "center",width: 150 },
          { field: 'address', title: '操作' ,width: 100,fixed: "right", align: "center",slots: {default: "operation"} }
        ],
        data: [
          { id: 10001, name: 'Test1',  role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' },
          { id: 10001, name: 'Test1',  role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
        ]
      })
     const title = ref(null)
      // 搜索
     const handleSearch = ()=>{
    }
  
    // 操作
    const handleOperation = async (type, row)=>{
      if (type === 'look') {

      }
    }
      return {
        defaultParams,
        gridOptions,
        handleSearch,
        handleOperation,
      }
    }
  }).use(ElementPlus).use(VXETable).mount('#app')
</script>
<style>
  .bank {
    height: 100%;
  }
  .operation-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
</html>
